<template>
  <div class="AD-template">
    <div class="header">
      <div class="header-item">
        <span>模版名称/ID</span>
        <el-input
          placeholder="请输入模版名称/ID"
          size="mini"
          v-model="searchQuery.id_name"
          clearable
        >
        </el-input>
      </div>
      <div class="header-item select-item">
        <span>价格</span>
        <el-select v-model="searchQuery.price" placeholder="请选择价格" size="mini" clearable>
          <el-option
            v-for="item in priceOptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </div>
      <div class="header-item select-item">
        <span>是否表单</span>
        <el-select
          v-model="searchQuery.is_form"
          placeholder="是否表单"
          size="mini"
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="header-item select-item">
        <span>是否问卷</span>
        <el-select
          v-model="searchQuery.is_question"
          placeholder="是否问卷"
          size="mini"
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="search-button">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="search"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="reset">重置</el-button>
      </div>
    </div>
    <div class="add-button">
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="mini"
        @click="showDialog"
        >新建模版</el-button
      >
    </div>
    <div class="landing-cards" v-loading="loading">
      <div
        class="card-item"
        v-for="(item, index) in cardList"
        :key="item.id"
      >
	  <div class="card-pic">
    <el-tooltip class="item" effect="dark"  placement="bottom">
        <div slot="content">{{'修改时间:'+item.update_time}}<br/>{{'修改人:'+item.update_user_id}}</div>
        <img :src="item.pics[0]" style="width: 100%;height: 100%;">
    </el-tooltip>
    <div class="ring"> {{ item.id }}</div>
    <div class="buttons">
      <el-button type="primary" size="mini" @click="updateMd(item)">编辑</el-button>
      <el-button type="primary" size="mini" @click="copyMd(item)">复制</el-button>
      <el-button type="primary" size="mini" @click="viewMd(item)">预览</el-button>
    </div>
	  </div>
	  <div class="name" style="border-bottom: 1px solid #409EFF;padding-bottom: 5px;">
      <el-tooltip class="item" effect="dark"  placement="top" :content="item.name">
        <div class="contxt">模版名称:{{ item.name }}</div> 
    </el-tooltip>
	  </div>
	  <div class="name">
      <el-tooltip class="item" effect="dark" :content="item.host" placement="top-end">
        <div class="contxt">域名:{{ item.host }}</div>
    </el-tooltip>
	  </div>
	  <div class="name">
		价格:{{ item.price }}元
	  </div>
	  <div class="name">
		使用场景:{{ item.scenes== 0?'微信外支付':'微信内支付'}}
	  </div>
	  <div class="name">
		表单:{{ item.is_form==1?'有':'无'}}
	  </div>
	  <div class="name">
		问卷:{{ item.is_question==1?'有':'无'}}
	  </div>
	</div>
    </div>
    <pagination class="footer-page" 
    v-show="total>0"
      :total="total"
      :page.sync="searchQuery.page"
      :limit.sync="searchQuery.pageSize"
      @pagination="getCardsList"
      :page-sizes="[10, 20, 30, 40]"
    />
    <el-dialog
      :title="dialogTitle"
      :visible.sync="addFlag"
      width="700px"
      top="5vh"
      append-to-body
      @close="resetUpdateItem"
    >
      <addTemp :closeFlag="addFlag" :updateItem="updateItem" :copyItem="copyItem" @closeEvent="cancel" @complete="updatePage" ></addTemp>
    </el-dialog>
  <el-dialog append-to-body :title="viewTitle"   :visible.sync="viewFlag" width="600px"  top="3vh">
    <div style="height:600px;width: 100%;position: relative;overflow: auto;z-index: 1000;padding-bottom: 140px;">
      <div style="width:100%;padding: 0 10px ;" v-for="(item,index) in viewPics" :key="index">
        <img  :src="item" style="width: 540px;display: block;" v-show="index!='1'">
        <div style="width: 540px;height: 150px;"  :style="{background:viewTheme[0]}" v-if="index==0&&viewForm==1">
          <div :style="{ color:viewTheme[1],fontSize:'18px',lineHeight:'150px',textAlign:'center'}">
            表单  
          </div>
        </div>
      </div>
      <div style="width:100%;height:165px;position: fixed;top:545px;padding: 0 10px ; ">
        <img  :src="viewPics[1]" style="width:540px;;display: block;height: 100%;">
      </div>
    </div>
  </el-dialog>
  </div>
</template>
<script>
import addTemp from './addTemp'
import { getList,getOptionList } from '@/api/landPage.js'
import { getPriceList } from "@/api/order";
export default {
	data() {
		return {
      loading:true,
      viewFlag:false,
      viewTitle:'',
      viewPics:[],
      viewForm:false,
      viewTheme:[],
			addFlag:false,
      updateItem:null,
      copyItem:null,
      priceOptions:[],
			options:[
				{
          		value: '1',
          		label: '有'
        		}, 
				{
          		value: '0',
          		label: '无'
        		}
			],
			dialogTitle:'新增模版',
			cardList:[],
      total:0,
			searchQuery:{
				id_name:'',
				is_form:'',
				is_question:'',
				price:'',
        page:1,
        pageSize:10
			}
		}
	},
	components:{
        addTemp
    },
	methods:{
    updatePage(){
      this.cancel()
      this.copyItem=null
      setTimeout(() => {
        this.getCardsList()
      }, 500);
    },
    cancel(){
      this.addFlag=false
      this.updateItem=null
      this.copyItem=null
      this.dialogTitle="新增模版"
    },
    resetUpdateItem(){
      this.updateItem=null
        this.dialogTitle="新增模版"
    },
    viewMd(item){
      this.viewFlag=true
      this.viewTitle=item.name
      this.viewTheme=item.theme_color.split(',')
      this.viewPics=item.pics
      this.viewForm=item.is_form
    },
    copyMd(item){
      this.copyItem=item
      this.$message({
          message: '复制模版成功',
          type: 'success'
        });
        this.showDialog()
    },
    updateMd(item){
      this.updateItem=item
      this.dialogTitle="模版ID:"+this.updateItem.id
      this.showDialog()
    },
		search(){
      this.searchQuery.page=1
			this.getCardsList()
		},
		reset(){
			this.searchQuery={
        id_name:'',
				is_form:'',
				is_question:'',
				price:'',
        page:1,
        pageSize:10
			}
			this.getCardsList()
		},
        showDialog(){
            this.addFlag=true
        },
		getCardsList(){
      this.loading=true
			getList(this.searchQuery).then(res=>{
				this.cardList=res.data.data
        this.total=res.data.total
        this.loading=false
			})
		},
    getCardsPriceList(){
      getPriceList().then(res=>{
       this.priceOptions=res.data
      })
    }
    },
	created() {
		this.getCardsList()
    this.getCardsPriceList()
	},
}
</script>
<style lang="scss" scoped>
.AD-template {
  margin-top: 20px;
  margin-left: 40px;
  padding-bottom: 25px;
  .header {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .header-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        text-align: right;
        font-size: 14px;
        min-width: 140px;
        color: #606266;
        line-height: 40px;
        padding: 0 12px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-weight: 700;
      }
    }
    .select-item {
      width: 270px;
    }
    .search-button {
      margin-left: 40px;
      display: flex;
      align-items: center;
    }
  }
  .add-button {
    margin-left: 40px;
    margin-top: 20px;
  }
  .landing-cards {
    padding-left: 40px;
    margin-top: 20px;
    width: 90%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
	  align-items: center;
    .card-item {
	  width: 320px;
    height: 500px;
	  border: #1890ff 1px solid;
	  border-radius: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
	  overflow: hidden;
	  .card-pic{
		width: 100%;
		height:65%;
		display: block;
		margin-bottom: 6px;
    position: relative;
    .ring{
      position: absolute;
      width: 40px;
      height: 40px;
      text-align: center;
      left: 15px;
      top:15px;
      background: #1890ff;
      line-height: 40px;
      color: #eeee;
      border-radius: 50%;
    }
    .buttons{
      width: 100%;
      position: absolute;
      display: flex;
      justify-content: space-evenly;
      bottom: 10px;
    }
	  }
	  .name{
		color: #31303066;
    margin-bottom: 8px;
		font-size: 14px;
    padding-left: 20px;
    width: 100%;
    .contxt{
      white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏超出内容 */
    text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
    }
	  }
    }
  }
  .footer-page {
    margin-right: 100px;
    margin-bottom: 25px;
  }
}
</style>
